<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="./rem.js"></script>
  <title>地图</title>
</head>
<style type="text/css">
  * {
    padding: 0;
    margin: 0;
  }

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .mui-content {
    height: 100%;
  }

  /* 新样式 */
  .mui-bar {
    background-color: #FEE21A;
  }

  #map {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .gm-style-mtc {
    display: none;
  }

  .gmnoprint {
    display: none !important;
  }

  .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom {
    display: none;
  }

  .gm-control-active.gm-fullscreen-control {
    display: none;
  }

  a[class^="https://maps.google.com/maps"] {
    display: none !important;
  }

  .loadinggif {
    width: .5rem;
    height: .5rem;
  }
</style>

<body>
  <div class="mui-content">
    <div id="map">
      <img class="loadinggif" src="./loading.gif">
    </div>
  </div>
</body>
<script src="./jquery-3.2.1.min.js"></script>
<!-- AIzaSyC8jQSK_m7WU5QLV6zemkns14z_45TRmJw -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC8jQSK_m7WU5QLV6zemkns14z_45TRmJw&callback=initMap" async
  defer></script>
<!-- <script src="./VConsole.js" type="text/javascript" charset="utf-8"></script> -->
<script type="text/javascript" charset="utf-8">

  document.addEventListener('UniAppJSBridgeReady', function ()
  {
    uni.getEnv(function (res)
    {
      initMap();
      uni.postMessage({
        data: {
          action: 'test',
          latitude: 'latitude',
          longitude: 'longitude'
        }
      });
    });
  });





  function initMap ()
  {
    // 获取当前地理位置
    if (navigator.geolocation) {



      navigator.geolocation.getCurrentPosition(function (position)
      {
        var coords = position.coords;
        startInitMap(coords.latitude, coords.longitude)
      }, function (err)
      {
        console.log('navigator.geolocation error')
        startInitMap(38.901127, -77.021348)
      }, {
        enableHighAccuracy: true, //是否要求高精度的地理位置信息
        timeout: 10000, //对地理位置信息的获取操作做超时限制，如果再该事件内未获取到地理位置信息，将返回错误
        maximumAge: 60 * 1000 //设置缓存有效时间，在该时间段内，获取的地理位置信息还是设置此时间段之前的那次获得的信息，超过这段时间缓存的位置信息会被废弃
      })
    } else {
      // alert(globalLanguage.ditu.no_tip);
      alert("你的浏览器不支持HTML5来获取地理位置信息。");
    }
  }

  function startInitMap (latitude, longitude)
  {
    var myLatlng = new google.maps.LatLng(latitude, longitude);

    var myOptions = {
      // 设定放大倍数
      zoom: 18,
      // 将地图中心点设定为指定的坐标点
      center: myLatlng,
      // 指定地图类型
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // 创建地图并在div中显示
    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    // // 在地图上创建标记
    // var marker = new google.maps.Marker({
    //     position: myLatlng,
    //     map: map
    // });
    // // 设定标注窗口，并指定该窗口中的注释文字
    // var infowindow = new google.maps.InfoWindow({
    //     content: "当前位置"
    // });
    // // 打开标注窗口
    // infowindow.open(map, marker);

    uni.postMessage({
      data: {
        action: 'loaded',
        latitude: latitude,
        longitude: longitude
      }
    });

    //监听点击地图事件
    google.maps.event.addListener(map, 'click', function (event)
    {
      var Lat = event.latLng.lng();
      var Lng = event.latLng.lng();
      uni.postMessage({
        data: {
          action: 'postMessage',
          latitude: Lat,
          longitude: Lng
        }
      });
    });
  }
</script>

</html>